{% extends 'base/front_base.html' %}
{% load articles_filters %}

{% block title %}
    文章详情
{% endblock %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{% static 'ueditor/third-party/tomorrow-night-eighties.css' %}">
    <script type="text/javascript" src="{% static 'ueditor/third-party/highlight.pack.js' %}"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <link rel="stylesheet" href="{% static 'css/articles/article_detail.min.css' %}">
    <link rel="stylesheet" href="{% static 'sweetalert/sweetalert.css' %}">
    <script src="{% static 'js/template-web.js' %}"></script>
    <script src="{% static 'sweetalert/sweetalert.min.js' %}"></script>
    <script src="{% static 'js/article_detail.min.js' %}"></script>
    <script type="text/plain" id="comment-item">
    {% verbatim %}
        <li class="parent-li">
            <div class="comment-info">
                <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=229504038,2135463436&fm=26&gp=0.jpg"
                     alt="" class="avatar">
                <span class="author">{{comment.author.username}}</span>
                <span class="pub-time">{{ comment.pub_time | timeSince }}</span>
            </div>
            <div class="comment-content">{{ comment.content }}</div>
        </li>
    {% endverbatim %}
    </script>
    <script type="text/plain" id="sub-comment-item">
    {% verbatim %}
        <li class="sub-li">
            <div class="comment-info">
                <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=229504038,2135463436&fm=26&gp=0.jpg"
             alt="" class="avatar">
                <span class="author">{{ comment.author.username }}</span>
                <span class="pub-time">{{ comment.pub_time | timeSince }}</span>
            </div>
            <div class="comment-content">{{ comment.content }}</div>
            <div class="more-opt">
                <button>回复</button>
            </div>
        </li>
    </script>
    {% endverbatim %}
{% endblock %}

{% block main %}
    <div class="main">
    <div class="wrapper">
        <div class="container-wrapper">
            <div class="main-wrapper">
                <h1 class="title">{{ article.title }}</h1>
                <div class="article-info">
                    <div class="author-box">
                        <span class="author">{{ article.author.username }}</span>
                        <span class="pub-time">{{ article.pub_time | time_since }}</span>
                        <span class="category">cpp</span>
                    </div>
                    <div class="shared-box">
                        <span>分享至：</span>
                        <a style="background-size: 220%;background: url({% static 'images/share.png' %}) no-repeat;background-size: 240%;" href="#" class="weixin"></a>
                        <a style="background-size: 220%;background: url({% static 'images/share.png' %}) no-repeat;background-size: 240%;background-position: -42px 0;margin-left: 10px;" href="#" class="weibo"></a>
                    </div>
                </div>

                <div class="article">
                    <div class="content-detail">
                        {{ article.content|safe }}
                    </div>
                </div>

                <div class="comment-wrapper">
                    <h3 class="title">评论（0）</h3>
                    {% if user.is_authenticated %}
                        <textarea name="comment" id="" class="login-textarea comment-textarea"
                              placeholder="请输入"></textarea>
                    {% else %}
                        <textarea name="comment" id="" class="login-textarea comment-textarea"
                              placeholder="立即登录，参与评论" readonly></textarea>
                    {% endif %}
                    <div class="submit-btn-group">
                        <button id="submit-btn" class="submit-btn" data-article-id="{{ article.pk }}">立即评论</button>
                    </div>

{#                    <ul class="parent-comment-list">#}
{#                        {% for comment in article.comments.all %}#}
{#                            <li class="parent-li">#}
{#                                <div class="comment-info">#}
{#                                    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=229504038,2135463436&fm=26&gp=0.jpg"#}
{#                                         alt="" class="avatar">#}
{#                                    <span class="author">{{ comment.author.username }}</span>#}
{#                                    <span class="pub-time">{{ comment.pub_time | time_since }}</span>#}
{#                                </div>#}
{#                                <div class="comment-content">{{ comment.content }}</div>#}
{#                                <div class="more-opt">#}
{#                                    <button>回复</button>#}
{#                                </div>#}
{#                                <ul class="sub-comment-list" style="margin-left: 30px;">#}
{#                                    <li class="sub-li">#}
{#                                        <div class="comment-info">#}
{#                                            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=229504038,2135463436&fm=26&gp=0.jpg"#}
{#                                         alt="" class="avatar">#}
{#                                            <span class="author">{{ comment.author.username }}</span>#}
{#                                            <span class="pub-time">{{ comment.pub_time | time_since }}</span>#}
{#                                        </div>#}
{#                                        <div class="comment-content">{{ comment.content }}</div>#}
{#                                        <div class="more-opt">#}
{#                                            <button>回复</button>#}
{#                                        </div>#}
{#                                    </li>#}
{#                                    <li class="sub-li">#}
{#                                        <div class="comment-info">#}
{#                                            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=229504038,2135463436&fm=26&gp=0.jpg"#}
{#                                         alt="" class="avatar">#}
{#                                            <span class="author">{{ comment.author.username }}</span>#}
{#                                            <span style="margin: 0 10px;">回复</span>#}
{#                                            <span class="author">{{ comment.reply_to.username }}</span>#}
{#                                            <span class="pub-time">{{ comment.pub_time | time_since }}</span>#}
{#                                        </div>#}
{#                                        <div class="comment-content">{{ comment.content }}</div>#}
{#                                        <div class="more-opt">#}
{#                                            <button>回复</button>#}
{#                                        </div>#}
{#                                    </li>#}
{#                                </ul>#}
{#                            </li>#}
{#                        {% endfor %}#}
{##}
{#                    </ul>#}
                    {{ article.comments.all | build_comment_tree }}
                </div>
            </div>

            {% include 'common/sidebar.html' %}
        </div>
    </div>
</div>
    <script type="text/javascript">
        var allpre = document.getElementsByTagName("pre");
        for(var i = 0; i < allpre.length; i++)
        {
            var onepre = document.getElementsByTagName("pre")[i];
            var mycode = document.getElementsByTagName("pre")[i].innerHTML;
            onepre.innerHTML = '<code id="mycode">'+mycode+'</code>';
        }
    </script>
{% endblock %}
